<template>
<div class="pad10">
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/' }">控制中心</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/banner' }">幻灯片分类</el-breadcrumb-item>
    <el-breadcrumb-item>幻灯片管理</el-breadcrumb-item>
  </el-breadcrumb>
</div>

  <div class="pad10">
    <el-row>
      <el-button round size="mini" @click="add()" type="primary">添加图片</el-button>
      <el-button round size="mini" @click="del_all" type="danger">批量删除</el-button>
    </el-row>
  </div>
<div class="pad10">
<div class="k">
    <el-table :data="tableData" border  v-loading="loading"  style="width: 100%;" height="600"  @selection-change="quanxuan">
        <el-table-column align="center" type="selection" width="45" />
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column  label="照片" width="54" >
          <template #default="v">
            <el-avatar shape="square" :size="32" fit="fill" :src="v.row.img"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column prop="link" label="链接地址" width="200" />
        <el-table-column prop="bid_name" label="所属分类" width="120" />
        <el-table-column prop="info" label="备注" width="220" />
        <el-table-column align="center" prop="create_time" :formatter="shijian" label="创建时间"   width="180" />
        <el-table-column align="center" prop="update_time" :formatter="shijian" label="更新时间"   width="180" />
        <el-table-column label="排序"   width="90" >
          <template #default="v">
            <el-input v-model="v.row.paixu" placeholder="" @change="paixu(v.row)"/>
          </template>
        </el-table-column>
        <el-table-column align="center" label="是否显示"   width="80" :cell-class-name="juzhong">
          <template #default="v">
            <el-switch v-model="v.row.is_show" @change="kaiguan1(v.row)" />
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" >
        <template #default="v">
            <el-button type="primary" round size="mini" @click="bianji(v.$index, v.row)">编辑</el-button>
            <el-button type="danger" round size="mini" @click="del(v.$index, v.row)">删除</el-button>
            
            
        </template>
        </el-table-column>
    </el-table>

</div>
</div>
<div class="pad10">
    <el-pagination
      v-model:currentPage="page"
      :page-sizes="[20, 50, 100, 500]"
      :page-size="limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
</div>

<el-drawer
    v-model="drawer"
    :title="title"
    direction="rtl"
    size="40%"
    :append-to-body="true"
    :before-close="qingling"
  >
    
   <Banner_list2 v-if="drawer" @shuaxin="get_shuaxin" :id="shuju.id"></Banner_list2> 


  </el-drawer>

</template>

<script scoped>
import { defineComponent, ref,reactive,toRefs } from 'vue'
import { ElMessage,ElLoading } from 'element-plus'
import {request} from '../api/request.js'
import {get_shijian} from '../api/gongju.js'
import Banner_list2 from '../components/Banner_list2.vue'

export default defineComponent({
    data(){
      return {
        shuju:null,
        title:'',
        drawer: false,
        shuju: {id:0},
        quanxuanData: [], //表格选中的值
        bid: 0
      }
    },
  methods: {
  
    get_shuaxin(){
            this.drawer=false;
        },
        bianji(index, row) {
            this.shuju=row;
            this.title = "编辑图片";
            this.drawer = true;
        },
        add() {
            this.title = "增加图片";
            this.drawer = true;
        },
        del(a, b) {
            this.shanchu([b.id]);
        },
        del_all() {
            var ids = [];
            this.quanxuanData.forEach((v, k) => {
                ids.push(v.id);
            });
            if (ids.length == 0) {
                ElMessage.error("请选择要删除的数据");
                return false;
            }
            this.shanchu(ids);
        },
        shanchu(ids) {
            this.loading=true;
            request("/g/info/del_banner_list2", { token: this.token, ids: ids }, res => {
                this.loading=false;
                if (res.ing == 1) {
                    ElMessage.success(res.msg);
                    this.jiazai();
                }
                else {
                    ElMessage.error(res.msg);
                }
            }, err => {
                loadingInstance.close();
                ElMessage.error(err.msg);
            });
        },
        juzhong() {
            return "juzhong";
        },
        shijian(r, c, v, i) {
            // console.log(v)
            return get_shijian(v);
        },
        kaiguan1(r) {
            //r传入的是整行的数据
            request("/g/info/update_banner_list2", { token: this.token, id: r.id, is_show: r.is_show == true ? 1 : 0 }, res => { 
              ElMessage.success(res.msg);
            }, err => { });
        },
        paixu(r) {
            //r传入的是整行的数据
            request("/g/info/update_banner_list2", { token: this.token, id: r.id, paixu: r.paixu }, res => {
                ElMessage.success(res.msg);
            }, err => { });
        },
        quanxuan(v) {
            console.log(v);
            this.quanxuanData = v;
        },
        qingling(){
            this.shuju={id:0};
            this.drawer=false;
        }
  },
  mounted(){
    this.bid=this.$route.query.bid
    console.log('挂载')
    // this.get_diqu();
    this.jiazai(this.bid);
  },
  setup() {
    var id=ref('');
    var loading=ref(false);  //加载开关
    var titles=ref('');
    var diqu_id=ref('');     //所选的分类ID
    var diqu=ref([]);  //分类数据
    
    var page=ref(1);
    var tableData=ref([]);
    var total=ref(0);
    var limit=ref(10);
    var token=window.sessionStorage.getItem('token');
    const handleSizeChange = (val) => {
      console.log(`${val} items per page`)
      limit.value=val
      jiazai()
    }
    const handleCurrentChange = (val) => {
    //   console.log(`current page: ${val}`)
      page.value = val
      jiazai()
    }

    const get_diqu=()=>{
      request('/g/info/get_diqu',{},res=>{
          console.log(res)
          if(res.ing==1){
              diqu.value=res.data;
          }else{
              ElMessage.error(res.msg)
          }
      },err=>{
          ElMessage.error( err.msg )
      })
    }

    const jiazai=(bid)=>{
      loading.value=true;
      request('/g/info/get_banner_list2',{bid:bid,token:token,page: page.value ,limit:limit.value },res=>{
          loading.value=false;
          if(res.ing==1){
              tableData.value=res.data.list;
              total.value=res.data.total;
          }else{
              ElMessage.error(res.msg)
          }
      },err=>{
          ElMessage.error( err.msg )
      })
    }

    const sousuo=()=>{
        page.value=1
        jiazai()
    }

    const drawer = ref(false);

    const state = reactive({
      shortcuts: [
        {
          text: '上周',
          value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            return [start, end]
          },
        },
        {
          text: '上个月',
          value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            return [start, end]
          },
        },
        {
          text: '近三个月',
          value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            return [start, end]
          },
        },
      ],
      value1: '',
      value2: '',
    })

    return {
      page,id,titles,diqu_id,diqu,
      tableData,
      total,
      loading,
      token,
      limit,
      drawer,
      ...toRefs(state),
      jiazai,
      get_diqu,
      sousuo,
      handleSizeChange,
      handleCurrentChange,
    }
  },
  //加在组件
  components: { Banner_list2 }

})
</script>

<style scoped>
.k{border: 1px solid var(--el-border-color-base);}

</style>